<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul></ul>
    <script>
        let ul = document.getElementsByTagName('ul')[0];
        var arr = ['烧烤', '自助', '泡面', '火锅', '烤鸭','zzz']
        for (var i = 0; i < arr.length; i++) {
            let temp = document.createElement('li');
            temp.setAttribute('class', 'li');
            temp.innerHTML = arr[i]+ '\n' + '<button>删除</button>'
            ul.appendChild(temp);
        }   
            let su = document.getElementsByClassName('li');
            for (var i = 0; i < su.length; i++) {
                let dele = su[i].lastChild;
                dele.onclick = function(){
                    dele.parentNode.remove()
                }
            }
    </script>
</body>

</html>